<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap表单样式 基础、内联、横向</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="../css/starter-template.css" rel="stylesheet">
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>

</head>
<!-- 表单样式 ， 表单基础，内联表单，横向表单-->
<body>
<!-- 表单样式 -->
<!--style="border:1px #2b669a solid"-->
<div class="container">
    <div class="row">
        <form action="#" method="post">
            <!-- fieldset :html5的标签，就是用于分组 比如用disabled属性，被fieldset包围的标签全被禁用 -->
            <!-- 如果fieldset里面用属性 disabled 表单中的所有全被禁用 -->
            <fieldset disabled>
                legend元素是 fielset元素的子元素。
                <legend>用户登陆</legend>
                <!-- form-group 设置与下面的div之间的像素为15个像素 -->
                <div class="form-group col-sm-2 col-md-6 col-lg-12">
                    <label>用户名：</label>
                    <!-- form-control 将输入框(文本框)的宽度设置成了100% -->
                    <input type="text" class="form-control" name="name" placeholder="输入用户名、手机号">
                </div>
                <div class="form-group col-sm-4 col-md-6 col-lg-12">
                    <label for="exampleInputEmail1">电子邮件</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="例如：examp@examp.com">
                </div>
                <div class="form-group col-sm-2 col-md-6 col-lg-12">
                    <label>密码：</label>
                    <input type="password" class="form-control-static" name="pwd" placeholder="输入密码">
                </div>
                <div class="form-group col-sm-2 col-md-6 col-lg-12">
                    <label for="exampleInputFile">图片上传</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">上传高清身份证正面</p>
                </div>
                <div class="checkbox col-sm-2 col-md-6 col-lg-12">
                    <!-- -->
                    <!-- bootstrap使用单选框的标准 -->
                    <label><input type="checkbox"/>记住密码</label>
                </div>
            </fieldset>
            <div>
                <!-- btn btn-default 设置按钮的样式-->
                <button type="submit" class="btn btn-default">登陆</button>
            </div>

        </form>
    </div>
</div>

<hr/>

<!-- 表单样式2   内联表单(有时候需要表单在一行显示 (比如搜索条件框)) -->
<div class="container" style="border:1px #2b669a solid">
    <!-- form-inline 表示在一条线上排列，内联表单 -->
    <form class="form-inline" action="#" method="post">
        <fieldset>
            <legend>用户登陆</legend>
            <!-- form-group 设置与下面的div之间的像素为15个像素 -->
            <div class="form-group">
                <!-- sr-only 可以把用户名：这个汉字隐藏掉 -->
                <label class="sr-only">用户名：</label>
                <!-- form-control 将输入框(文本框)的宽度设置成了100% -->
                <input type="text" class="form-control" name="name" placeholder="输入用户名">
            </div>
            <div class="form-group">
                <label>密码：</label>
                <input type="password" class="form-control-static" name="pwd" placeholder="输入密码">
            </div>
            <div class="checkbox">
                <!-- bootstrap使用单选框的标准 -->
                <label><input type="checkbox"/>记住密码</label>
            </div>
            <div class="btn">
                <!-- btn btn-default 设置按钮的样式-->
                <button type="submit" class="btn btn-default">登陆</button>
            </div>
        </fieldset>
    </form>
</div>

<!-- container：作用相当于一个自动居中的容器(用的地方很多，不然样式可能难看) -->
<!-- 表单样式3   横向表单(注意：只能在大于768像素里使用)（指的是，标题与输入框等横向排列） -->
<div class="container" style="border:1px #2b669a solid">
    <!-- form-horizontal(只是做了边距处理) 横向表单,依赖栅格系统 -->
    <form class="form-horizontal" role="form" action="#" method="post">
        <fieldset>
            <legend>用户登陆</legend>
            <!-- form-group 设置与下面的div之间的像素为15个像素 -->
            <div class="form-group">
                <!-- control-label 将label中的文字沾满整个label标签，并且自适应 -->
                <label class="col-sm-2 control-label">用户名：</label>
                <div class="col-sm-8">
                    <!-- form-control 将输入框(文本框)的宽度设置成了100% -->
                    <input type="text" class="form-control" name="name" placeholder="输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                <div class="col-sm-8">
                    <input type="password" class="form-control" name="pwd" placeholder="输入密码">
                </div>
            </div>
            <div class="checkbox">
                <!-- bootstrap使用单选框的标准 -->
                <div class="col-sm-5"></div>
                <div class="col-sm-7">
                    <label class="pull-left"><input type="checkbox"/>记住密码</label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-5"></div>
                <div class="col-sm-7">
                    <!-- btn btn-default 设置按钮的样式-->
                    <button type="submit" class="btn btn-default">登陆</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

</body>
</html>